import React, { PureComponent } from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
} from 'react-native';

import { RNCloseModule } from 'react-native-cgws-support';

import { getColors } from '../theme';
import { ic_back, ic_title_close_black } from '../assets';

export default class Header extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  componentDidMount() {
    // console.log(this.props);
  }
  render() {
    let { title, changeBack } = this.props;
    return (
      <View
        style={{ ...styles.container, backgroundColor: getColors().base_oc_11 }}
      >
        <View style={{ flex: 1 }}>
          <Text
            style={{
              fontSize: 19,
              textAlign: 'center',
              color: getColors().base_fc_5,
              fontWeight: 'bold',
              lineHeight: 43,
            }}
          >
            {title}
          </Text>
          <TouchableOpacity
            style={{
              position: 'absolute',
              width: 34,
              height: 43,
              justifyContent: 'center',
              alignItems: 'center',
            }}
            onPress={changeBack}
          >
            <Image source={ic_back} style={{ width: 18 }} />
          </TouchableOpacity>

          <TouchableOpacity
            style={{
              width: 34,
              height: 43,
              justifyContent: 'center',
              alignItems: 'center',
              position: 'absolute',
              right: 16,
            }}
            onPress={() => RNCloseModule.close()}
          >
            <View
              style={{
                width: 32,
                height: 32,
                borderWidth: 1,
                borderColor: getColors().base_lc_1,
                borderRadius: 32,
                alignItems: 'center',
                justifyContent: 'center',
              }}
            >
              <Image source={ic_title_close_black} />
            </View>
          </TouchableOpacity>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: 43,
    flexDirection: 'row',
  },
});
